<template>
  <view  >
    			<view class="serarch-box">
    			  <uni-search-bar class="serarch-box" :focus="true"   @input="handleipt"  :radius="100" cancelButton="none" ></uni-search-bar>
    			</view>
         <view class="history" v-if="searchlist.length==0 || !searchlist">
           <view >搜索历史</view>
           <uni-icons  type="trash-filled" size="24" @click="deletehistory"></uni-icons>
         </view>
          <view class="historylist" v-if="searchlist.length==0 || !searchlist">
            <view class="item" v-for="item in historylist" :key="item" @click="gotogoodlist(item)">{{item}}</view>
          </view>
          
          <view class="list" >
            <view class="item" v-for="item in searchlist" :key="item.goods_id" @click="godetail(item.goods_id)">
              <view >{{item.goods_name}} </view>
              <uni-icons class="icon" type="right" size="16"></uni-icons>
            </view>
          </view>
  </view>
</template>

<script>
  import {debounce} from '../../utils/debounce.js'
  export default {
    onLoad(){
    },
    data() {
      return {
        timer:null,
        searchlist:[],
        historylist:uni.getStorageSync('historylist')
      };
    },
    methods:{
      handleipt(e){
          if(this.timer) clearTimeout(this.timer)
          this.timer = setTimeout(()=>{
            this.getserarchlist(e)
            this.sethistory(e)
          },500)
      },
      async  getserarchlist(val){
         const {data} = await uni.$http({url:'/api/public/v1/goods/qsearch?query='+val},false)
         this.searchlist = data.message
      },
      godetail(id){
        uni.navigateTo({
          url:"/subpkg/goods-detail/goods-detail?goods_id="+id
        })
      },
      sethistory(val){
        if(val.trim()){
          const list = new Set([...this.historylist,val.trim()])
          this.historylist = [...list].reverse()
          uni.setStorageSync('historylist', this.historylist);
        }else{
          return
        }
      },
      gotogoodlist(item){
        uni.navigateTo({
          url:"/subpkg/goods_list/goods_list?query="+item
        })
      },
      deletehistory(){
        uni.removeStorage({
        	key: 'historylist',
        	success: ()=>{
            this.historylist = []
        		uni.showToast({
        		  title:"清除成功",
        		})
        	}
        });
      }
    }
  }
</script>

<style lang="scss">
.uni-searchbar{
  background-color: #c00000;
}
.serarch-box{
  position: sticky;
  left: 0;
  top: 0;
  right: 0;
  z-index: 999;
}
.item{
  background-color: #eee;
  padding: 10rpx;
  margin-bottom: 4rpx;
  display: flex;
  justify-content:space-between;
  view{
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
.history{
  display: flex;
  padding: 10px;
  justify-content:space-between;
  align-items: center;
}
.historylist{
  display: flex;
  flex-wrap: wrap;
  .item{
    padding: 20rpx;
    margin: 20rpx;
    background-color: #efefef;
  }
}
</style>
